<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: url(images/bg.png) no-repeat;background-size: 100% 100%;padding-top: 2%;padding-bottom: 2%}
    	.icon-bars{color: #fff;font-size: 2rem}
    	.icon-envelope-alt{color: #fff;font-size: 2rem}
    	.relative span{font-size: 12px;position: absolute;width: 1.5rem;height: 1.5rem;color: #fff;top: -.4rem;right: -.4rem;border-radius: 50%;background: #fac72d;text-align: center;line-height: 1.5rem}
    	.row img{border-radius:50%;border:2px solid #fff;}
    	.text-white{color: #fff}
    	.white{background: #fff}
    	.panel-group{margin-top: 10%;position: relative;}
    	.panel-hot{position: absolute;top: -.5rem;right: 2%;width: 14%}
    	.panel-logo{position: absolute;left: -1%;top: -18%;border-radius: 50%;border:7px solid #f3f3f3;width: 22%}
    	.panel span{color: red}
    	.border{border-right: 1px solid #000}
    	footer{margin-top: 5%}
    	/*重置zui部分样式*/
    	.row{margin: 0}
    	.panel{border:0;border-radius: 0;}
    	.panel-group .panel{border-radius: 0}
    	.panel-group .panel+.panel{border:0;border-radius: 0;margin: 0}
		.btn{width: 100%;border-radius: 0;border:0;background: orange;color: #fff;padding: .8em 0}
		.btn:focus{border:0;background: orange;color: #fff;box-shadow: none;}
		.small{font-size: 50%}
		.list-group{padding: 0;border:0 none;min-width: auto}
		.list-group-item{padding: .5em}
		.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color:inherit;color: #353535}
		.my-war{background: url(images/war.png) no-repeat left center;background-size: 100%;}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header>
		<div class="container">
			<div class="row">
				<div class="col col-xs-2 text-left">
					<i class="icon icon-bars dropdown-toggle" data-toggle="dropdown"></i>
					<ul class="dropdown-menu list-group text-center">
						<li class="list-group-item"><a class="" href="">我的推荐</a></li>
						<li class="list-group-item"><a href="">账户管理</a></li>
						<li class="list-group-item"><a href="">优惠券</a></li>
						<li class="list-group-item"><a href="">账户安全</a></li>
					</ul>
					
				</div>
				<div class="col col-xs-8"></div>
				<div class="col col-xs-2 text-right relative">
					<i class="icon icon-envelope-alt"></i>
					<span>2</span>
				</div>
			</div>
			<div class="row" style="margin-top:5%">
				<div class="text-center">
					<img class="" src="images/head.png">
				</div>
			</div>
			<div class="row text-center" style="margin-top:4%">
				<span class="text-white">名字</span>
			</div>
			<div class="row text-center" style="margin-top:2%">
				<span class="text-white">500</span>
			</div>
			<div class="row text-center" style="margin-top:2%">
				<span class="text-white small">总金额（元）</span>
			</div>
		</div>
	</header>
	<div class="grid">
		<div class="container">
			<div class="panel-group">
			  	<div class="panel white text-center" style="padding:8% 0">
			    	步步为赢
			  	</div>
			  	<div class="panel white" style="padding:0 .5em .6em">
			    	机制的看懂宏观经济，灵活的认识股票投资，简单的理解基金原理，在玩耍中做着有意思的金融题，把不懂的投资知识统统Get！
			  	</div>
			  	<div class="panel" style="background:#eaeaea;padding:1em 0 .5em">
			    	<div class="col col-xs-4 text-center small border">闯关数:<span>10</span></div>
			    	<div class="col col-xs-4 text-center small border">胜率:<span>50%</span></div>
			    	<div class="col col-xs-4 text-center small">奖金数:<span>11.0元</span></div>
			  	</div><img style="width:100%;display:block" src="images/bottom.png">
			  	<div class="panel"></div>
			  	<img class="panel-hot" src="images/A4-hot.png">
			  	<img class="panel-logo" src="images/A4-1.1.png">
			</div>
		</div>
	</div>
	<footer>
		<button class="btn text-center" type="button">
			<span class="my-war" style="padding:.5em 1.5em .5em 0;margin-right:.5em"></span>开始疯狂之旅
		</button>
	</footer>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/zui.min.js"></script>
	<script type="text/javascript">
		$('.panel-hot').css('top',-$('.panel-hot').width()*12/100+'px');
		$('.panel-logo').css({'top':-$('.panel-logo').width()*60/139+'px','left':-$('.panel-logo').width()*2/139});
	</script>
</body>
</html>